<template>
	<div class="addDynamic">
		<h1>新增动态</h1>
		<div class="addSelect clear_fix">
			<p>动态样式</p>
			<template class="select">
			  <el-radio v-model="radio" label="1">三列式</el-radio>
			  <el-radio v-model="radio" label="2">左1大右2小</el-radio>
			  <el-radio v-model="radio" label="3">左2小右1大</el-radio>
			</template>
		</div>
		
		<div v-for="(val,index) in imgA" class="addImgBox clear_fix">
			<p>{{val.id}}</p>
			<div class="uploadImg clear_fix">	
				<img v-if="val.imgUrl" :src="val.imgUrl" />
				<span v-else>未上传</span>				
			</div>
			<el-row class="addBtn">
				<!--添加按钮-->
				<el-button class="addImg" v-if="val.imgUrl"  @click="change(index)">修改</el-button>
				<el-button class="addImg" v-else  @click="add(index)">增加</el-button>
			</el-row>
		</div>

		
		<div class="subBtn">
		 	<el-button  type="primary" @click="sure">立即提交</el-button>
		</div>
	 	<!--弹窗-->
		<el-dialog title="新增图片" :visible.sync="dialogFormVisible">
		  	<!--图片上传-->
		  	<div class="uploadBox">
		  	  <div class="upload">上传图片</div>
		      <el-upload
				  class="upload-demo"
				  ref="upload"
				  action="https://jsonplaceholder.typicode.com/posts/"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :file-list="fileList"
				  :on-change='changeUpload' 
				  :auto-upload="false">
				  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
				</el-upload>
			</div>
	  </el-dialog>
	</div>
</template>

<script>
	import Editor from 'wangeditor'
	import config from '@/assets/js/config.js'
	import axios from "axios"
	export default{
		data(){
			return{
				radio:"1",
				//上传图片数据
				dialogFormVisible: false,
				changeBtn:true,
			
				updateImg:config.uploadImg,
				formData: new FormData(),
        		fileList: [],
        		imgA:[{id:"1"},{id:"2"},{id:"3"}],
        		index:0,
        		list2:"",
        		arrimg:""

			}
		},
		methods:{
			//上传按钮
		      submitUpload(file, fileList) {
		        this.changeBtn=false;
		        		      	console.log(this.radio)
		      	console.log(this.$store.state.token);
		      	console.log("照片",this.imgA)
		      	var baseUrl = 'http://yaochiwan2.bluej.cn';		     
//               this.$require.post(this.$config.dynamic,
                 	axios.post(baseUrl + '/dynamic/add',{
               		img_url1:this.imgA[0]["imgUrl"],
               		img_url2:this.imgA[1]["imgUrl"],
               		img_url3:this.imgA[2]["imgUrl"],
               		type_id:this.radio
               },{
               	     	headers:{
					  Authorization: "Bearer " + this.$store.state.token
					 }
               })
               .then((res)=>{
               		console.log(res);
               		this.$router.push({
//             			name:"dynamic"
               		})
               })
               .catch((err)=>{
               	console.log(11111)
               })
               	
		      },
		      change(index){
		      	this.dialogFormVisible = true;
		      	this.index = index;
				console.log(index);				
     			console.log(this.Img)
		      },
		      add(index){
				this.dialogFormVisible = true;
				this.index = index;
				console.log(index);				
     			console.log(this.Img)

			},
		    changeUpload(file, fileList){
		    	console.log(this.$store.state.token)
				console.log(file,fileList);
				console.log(file.raw);
				var formData = new FormData();
				formData.append("files",file.raw);
				this.$require.post(config.uploadImg,formData,{
					headers: {
					   Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
				    this.Img="http://yaochiwan2.bluej.cn"+res.data.data.img_url;               
					console.log(res);
					//为对象添加属性
					this.imgA[this.index]["imgUrl"] = "http://yaochiwan2.bluej.cn"+res.data.data.img_url					
				})
			},
		      handleRemove(file, fileList) {
		        console.log(file, fileList);
		      },
		      handlePreview(file) {
		        console.log(file);
		      },
		      sure(){		      	
                 this.$router.push({
                 	name:"dynamic"
                 })
		      }
		}
		

	}
</script>

<style lang="scss" scoped>

.addDynamic{
	margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
}
.addSelect{
	margin-top: 30px;
	p{
		float: left;
		width: 10%;
		margin-right: 20px;
		line-height: 30px;
		text-align: right;
		font-weight: 700;
		color: #606266;
		
	}
	.select{
		float: left;
		width: 80%;
		height: 30px;
	}
	.el-radio{
		line-height: 30px;
	}
}
.addImgBox{
	margin-top: 30px;
	height: 100px;
	/*overflow: hidden;*/
	p{
		float: left;
		width: 10%;
		margin-right: 20px;
		text-align: right;
		line-height: 40px;
		font-weight: 700;
		color: #606266;
	}
	.uploadImg{
		float: left;
		width: 100px;
		height: 120px;
		line-height: 40px;
		img{
			width: 100%;
			height: 100%;
		}
		
	}
	.addBtn{
		float:right;
		/*margin-right: 20px;*/
	}
}
.subBtn{
	margin-top: 20px;
	margin-left: 100px;	
}
</style>